<script setup lang="ts">
import type { MenuPlacement, TooltipPlacement } from 'vidstack'

import CaptionSubmenu from '../menus/CaptionSubmenu.vue'
import QualitySubmenu from '../menus/QualitySubmenu.vue'
import SpeedSubmenu from '../menus/SpeedSubmenu.vue'
import ColorCorrection from '../menus/ColorCorrection.vue'
import ActivityData from '../menus/ActivityData.vue'
import Autofollow from '../menus/Autofollow.vue'
import Menu from '../menus/Menu.vue'

const { placement, tooltipPlacement } = defineProps<{
  placement: MenuPlacement
  tooltipPlacement: TooltipPlacement
}>()
</script>

<template>
  <Menu :placement="placement" :tooltip-placement="tooltipPlacement">
    <template #button>
      <media-icon
        class="h-8 w-8 transform transition-transform duration-200 ease-out group-data-[open]:rotate-90"
        type="settings"
      />
    </template>
    <template #content>
      <CaptionSubmenu />
      <QualitySubmenu />
      <SpeedSubmenu />
      <ColorCorrection />
      <ActivityData />
      <Autofollow />
      <ColorCorrection />
    </template>
    <template #tooltip-content>
      <span>设置</span>
    </template>
  </Menu>
</template>
